<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="gtitle" style="margin-bottom: 20px"><a-icon type="info-circle" style="color: #108ee9" theme="filled"/>资产分组维护及管理</div>

      <div class="rowtxt">
        <a-row class='rowmb'>
          <a-col :span="3">资产自动发现扫描:</a-col>
          <a-col :span="8">
            <a-switch default-checked v-model="isAvailability" @change="update('isAvailability')"/>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="8" :offset="3">
            <a-row class='rowmb'>
              <a-col :span="6" >IP探测:</a-col>
              <a-col :span="10" >
                <a-input placeholder="请输入IP地址，IP段或IP掩码" v-model="ipinput"></a-input>
              </a-col>
              <a-col :span="4" :offset="1">
                <a-button type="primary" @click="addip()">添加</a-button>
              </a-col>
            </a-row>
            <a-row class='rowmb'>
              <a-col :span="15" offset="6">
                <div class="iplist">
                    <div v-for="(item2,index) in ipjson.ip">
                      {{item2.value}}
                      <a-icon type="delete" class="icon" @click="deleteip(index)"/>
                    </div>
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="8" :offset="3">
            <a-row class='rowmb'>
              <a-col :span="6" >扫描时间间隔:</a-col>
              <a-col :span="10" >
                <a-input placeholder="60" v-model="timeInterval" ></a-input>
              </a-col>
              <a-col :span="7" :offset="1" style="white-space: nowrap">
                秒
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="8" :offset="3">
            <a-row class='rowmb'>
              <a-col :span="6" ></a-col>
              <a-col :span="4" >
                <a-button type="primary" @click="update()">确定</a-button>
              </a-col>
            </a-row>
          </a-col>
        </a-row>

        <a-row class='rowmb'>
          <a-col :span="3">云平台联动:</a-col>
          <a-col :span="8">
            <a-switch default-checked />
          </a-col>
        </a-row>

        <a-row class='rowmb'>
          <a-col :span="8" :offset="3">
            <a-row class='rowmb'>
              <a-col :span="6" >选择云平台:</a-col>
              <a-col :span="10" >
                <a-input placeholder="VMWare"></a-input>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="8" :offset="3">
            <a-row class='rowmb'>
              <a-col :span="6" >云平台地址:</a-col>
              <a-col :span="10" >
                <a-input placeholder="云平台IP地址"></a-input>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="8" :offset="3">
            <a-row class='rowmb'>
              <a-col :span="6" >云平台用户名:</a-col>
              <a-col :span="10" >
                <a-input placeholder="云平台具备全局读权限的用户名"></a-input>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="8" :offset="3">
            <a-row class='rowmb'>
              <a-col :span="6" >密码:</a-col>
              <a-col :span="10" >
                <a-input placeholder="填写密码"></a-input>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="8" :offset="3">
            <a-row class='rowmb'>
              <a-col :span="6" >同步时间间隔:</a-col>
              <a-col :span="10" >
                <a-input placeholder="填写时间"></a-input>
              </a-col>
              <a-col :span="7" :offset="1" style="white-space: nowrap">
                秒
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="8" :offset="3">
            <a-row class='rowmb'>
              <a-col :span="24" >
                <a-button type="primary" style="margin-right: 20px">添加</a-button>
                <a-button type="primary" style="margin-right: 20px">修改</a-button>
                <a-button type="primary" style="margin-right: 20px">删除</a-button>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="20" :offset="3">
            <a-table :rowSelection="{}" :columns="columns"  :data-source="data">
            </a-table>
          </a-col>
        </a-row>


      </div>


      <div class="gtitle" style="margin-bottom: 20px"><a-icon type="info-circle" style="color: #108ee9" theme="filled"/>手动导入方式</div>

      <a-button type="primary" style="margin-right: 20px">EXCEL导入</a-button>
      <a-button type="primary" style="margin-right: 20px">下载EXCEL模板</a-button>
    </a-card>
  </page-header-wrapper>
</template>

<script>

import {getDiscovery,updateDiscovery} from '@/api/assets'
export default {
  name: "AssetDiscovery",
  data() {
    return {
      columns:[
        {
          title: '#',
          dataIndex: 'index',
          with:'30px'
        },
        {
          title: '云平台名称',
          dataIndex: 'name',
        },
        {
          title: '联动状态',
          dataIndex: 'state',
        },
        {
          title: '云平台地址',
          dataIndex: 'address',
        },
        {
          title: '上次同步时间',
          dataIndex: 'time',
        },
      ],
      data:[{
        key:1,
        index:1,
        name:2,
        state:3,
        address:4,
        time:5
      }],
      timeInterval:'',
      isAvailability:false,
      ipinput:'',
      ipjson:{}
    }
  },
  mounted() {
    getDiscovery().then(res=>{
      this.timeInterval = res.data.timeInterval
      this.isAvailability = res.data.isAvailability == 1?true:false
      this.ipjson = JSON.parse(res.data.content)
    })
  },
  methods:{
    confirmt(){

    },
    addip(){
      if(this.ipinput){
        let ipreg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/
        let ipdreg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)(-)((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/
        let ipyreg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)(\/)(\d|[1-2]\d|3[0-2])$/
        let ip = this.ipinput
        if(!ipreg.test(ip) && !ipdreg.test(ip) && !ipyreg.test(ip)){
          this.$message.error('格式不正确')
          return
        }
        if(this.ipjson.ip.indexOf(this.ipinput) > -1){
          this.$message.error('不能添加重复IP')
          return
        }
        let json = {}
        if(this.ipinput.indexOf('-')>-1){
          json.type = 3
        }else if(this.ipinput.indexOf('/')>-1){
          json.type = 2
        }else{
          json.type = 1
        }
        json.value = this.ipinput
        this.ipjson.ip.push(json)
        this.ipinput = ''
      }
    },
    update(str){
      let json = {
        id:1
      }
      json.isAvailability = this.isAvailability?1:0
      json.timeInterval = this.timeInterval
      json.content = JSON.stringify(this.ipjson)
      updateDiscovery(json).then(res=>{})
    },
    deleteip(index){
      this.ipjson.ip.splice(index,1)
    },
    selectedRowKeys(){

    },
    onSelectChange(){

    }
  }
}
</script>

<style lang="less" scoped>
.gtitle{
  background-color: #e6f3fc;
  line-height: 40px;
  padding-left: 20px;
  color: #333;
  font-weight: bold;
i{
  margin-right: 10px;
}
}
.rowtxt{
  line-height: 32px;
}
.showtxt{
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 10px;
  height: 120px;
  overflow-y: auto;
}
.rowmb{
  margin-bottom: 10px;
}

.iplist{
  border: 1px solid #ddd;
  padding: 5px;
  min-height: 100px;
  line-height: 30px;
  div:hover{
    background-color: #efefef;
  }
  .icon{
    color: red;
    cursor: pointer;
    line-height: 30px;
    float: right;
    margin-right: 20px;
  }
}
</style>